<template>
  <div class="app-container" style="padding:6px;">
    <el-row>
      <el-col v-for="(item,index) in gates" :key="index" :span="12" style="padding:6px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix flex" style="align-items:center;">
            <b>{{ item.name }}</b>
            <div class="mlauto">
              <el-button-group
                v-for="(citem,cindex) in item.rtuActionDisplays.map(val => {
                  if (typeof (val.action_arr) === 'string') {
                    val.action_arr = JSON.parse(val.action_arr)
                  }
                  return val
                })"
                :key="cindex"
              >
                <el-button
                  v-for="(ccitem,ccindex) in citem.action_arr"
                  :key="ccindex"
                  class="ml12"
                  @click="sendCommand(citem, item)"
                >{{ ccitem.name }}</el-button>
              </el-button-group></div>
          </div>
          <div class="flex">
            <div>
              <div class="state-container">
                <dl v-for="(citem,cindex) in item.rtuPortDisplays" :key="cindex">
                  <dt :class="getClass(citem,item)">{{ getState(citem,item) }}<em>{{ citem.unit }}</em></dt>
                  <dd class="iconfont" :class="citem.iconfont" />
                  <dd class="name">{{ citem.name }}</dd>
                </dl>
              </div>
              <div class="control-container">
                <el-button-group
                  v-for="(citem,cindex) in item.rtuActionDisplays.map(val => {
                    if (typeof (val.action_arr) === 'string') {
                      val.action_arr = JSON.parse(val.action_arr)
                    }
                    return val
                  })"
                  :key="cindex"
                >
                  <el-button
                    v-for="(ccitem,ccindex) in citem.action_arr"
                    :key="ccindex"
                    class="mr12 ml12"
                    @click="sendCommand(citem, item)"
                  >{{ ccitem.name }}</el-button>
                </el-button-group>
              </div>
            </div>
            <div class="monitor">
              <spjk :serialno="item.spjk" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDeviceState } from '@/utils/device'
import { runDict, closeDict, dclassCodeMap } from '@/utils/constant'
import Spjk from '@/components/Device/Spjk/V2'
export default {
  components: {
    Spjk
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['devices']),
    gates() {
      const res = this.devices.filter((val) => {
        return +val.product_type === dclassCodeMap.zk
      }).map((val) => {
        val.spjk = val.settings.spjk
        return val
      })
      console.log(res)
      return res
    }
  },
  methods: {
    getState(citem, item) {
      return getDeviceState(item.states[citem.namekey], citem, item.states)
    },
    getClass(citem, item) {
      if (runDict.includes(this.getState(citem, item))) {
        return 'color-success'
      }
      if (closeDict.includes(this.getState(citem, item))) {
        return 'color-danger'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  margin-left:auto;
}
.state-container{
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  margin-top: -20px;
  padding: 12px 0;
  dl{
    display:flex;
    // flex:1;
    flex-direction:column;
    margin-top:12px;
    text-align:center;
    color:#666;
    width:25%;
    flex-wrap: nowrap;
    dt{
      font-weight:bold;
      font-size:16px;
      color:#333;
      &.color-success{
        color:#13ce66
      }
      &.color-warning{
        color:#FFBA00
      }
      &.color-danger{
        color:#ff4949
      }
      em{
        font-style:normal;
        font-size:14px;
        padding-left:4px;
      }
    }
    dd{
      &.iconfont{
        font-size: 18px;
        margin-top: 4px;
      }
      &.name{
        font-size: 12px;
        margin-top: 0;
        color:#777;
      }
    }
  }
}
</style>
